<template>
  <div class="info-dialog">
    <el-dialog
      :visible.sync="visible"
      :title="title"
      :modal-append-to-body="true"
      :append-to-body="true"
      :destroy-on-close="false"
      :modal="true"
      :close-on-click-modal="false"
      top="10vh"
      width="650px"
      @closed="closed"
    >
          <el-form ref="signalingForm"  :model="signalingForm" label-width="110px" :rules="rules">
            <el-row :gutter="24" style="margin-top 10px; ;">
              <el-col :span="14">
                <el-form-item label="信令外网IP" prop="signalingIP">
                  <el-input v-model="signalingForm.signalingIP" placeholder="请输入外网IP" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="信令内网IP" prop="signalingInnerIP">
                  <el-input v-model="signalingForm.signalingInnerIP" placeholder="请输入内网IP" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="信令SSL Key" prop="signalingSSLKeyAbsolutePath">
                  <el-input v-model="signalingForm.signalingSSLKeyAbsolutePath" placeholder="请输入默认路径" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="信令SSL Cert" prop="signalingSSLCertAbsolutePath">
                  <el-input v-model="signalingForm.signalingSSLCertAbsolutePath" placeholder="请输入默认路径" autocomplete="off"></el-input>
                </el-form-item>

              </el-col>
              <el-col :span="10">
                <el-form-item label="外网信令端口" prop="signalingPort">
                  <el-input v-model="signalingForm.signalingPort" placeholder="请输入外网端口" autocomplete="off" ></el-input>
                </el-form-item>

                <el-form-item label="内网信令端口" prop="signalingInnerPort">
                  <el-input v-model="signalingForm.signalingInnerPort" placeholder="请输入内网端口" autocomplete="off" ></el-input>
                </el-form-item>

                <el-form-item label="启用SSL">
                  <el-switch
                    v-model="signalingForm.signalingEnableSSL"
                    active-value="1"
                    inactive-value="0"
                    >
                  </el-switch>
                </el-form-item>

                <el-form-item label="自动启动">
                  <el-switch
                    v-model="signalingForm.enabled"
                    active-value="1"
                    inactive-value="0"
                    >
                  </el-switch>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>


      <div style="text-align: right;">
        <el-button @click="closed" :loading="loading">取 消</el-button>
        <el-button type="primary" :loading="loading" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    saveServer,
    getServerById
  } from '@/api/cloud/server'
  import {
    isOk
  } from '@/utils/request'
  export default {
    name: 'SignalingDialog',
    components: {
    },
    props: {
      properties: {
        type: Object,
        default: () => ({})
      }
    },
    computed:{

    },
    watch:{
      properties: {
        handler: function(value) {
          this.visible = value.visible
          if (value.data) {
            this.signalingForm.id = value.data.id || ''
          } else {
            this.signalingForm.id =''
          }
          if (value.type) {
            this.type = value.type
            if (value.type === '0') {
              this.title = '新增'
            }
            if (value.type === '1') {
              this.title = '编辑'
            }
          }
        },
        immediate: true,
        deep: false
      }
    },
    created() {
      this.getServerById();
    },
    data(){
      return {
        visible:false,
        title:'',
        loading:false,
        signalingForm:{
          id:'',
          name:'信令服务',
          type:'signaling',
          signalingIP:"",
          signalingInnerIP:"",
          signalingPort:"",
          signalingInnerPort:"",
          signalingEnableSSL:"0",
          signalingSSLKeyAbsolutePath:"",
          signalingSSLCertAbsolutePath:"",
        },
        rules: {
          signalingIP: [{
            required: true,
            message: '请输入信令外网IP',
            trigger: 'blur'
          }],
          signalingInnerIP: [{
            required: true,
            message: '请输入信令内网IP',
            trigger: 'blur'
          }],
          signalingPort: [{
            required: true,
            message: '请输入信令外网端口',
            trigger: 'blur'
          }],
          signalingInnerPort: [{
            required: true,
            message: '请输入信令内网端口',
            trigger: 'blur'
          }]
        }
      }
    },
    methods:{
      getServerById(){
        this.loading=true
        getServerById({
          id: this.signalingForm.id,
        }).then(rsp => {
          if(isOk(rsp)){
            const _data = rsp.result

            this.signalingForm.id=_data.id;
            this.signalingForm.enabled=_data.enabled;
            this.signalingForm.type=_data.type;
            const _config=JSON.parse(_data.config);

            this.signalingForm.signalingIP=_config?_config.signalingIP:'';
            this.signalingForm.signalingInnerIP=_config?_config.signalingInnerIP:'';
            this.signalingForm.signalingPort=_config?_config.signalingPort:'';
            this.signalingForm.signalingInnerPort=_config?_config.signalingInnerPort:'';
            this.signalingForm.signalingEnableSSL=_config?_config.signalingEnableSSL:'';
            this.signalingForm.signalingSSLKeyAbsolutePath=_config?_config.signalingSSLKeyAbsolutePath:'';
            this.signalingForm.signalingSSLCertAbsolutePath=_config?_config.signalingSSLCertAbsolutePath:'';
            this.loading = false
          }
        }).catch(err => {
          console.log(err);
        })
        .finally(() => {
          this.loading = false
        })
      },
      submitForm: function() {
        this.$refs.signalingForm.validate((valid) => {
          if (valid) {
            this.loading = true
            var form={
              id:this.signalingForm.id,
              name:this.signalingForm.name,
              enabled:this.signalingForm.enabled,
              type:this.signalingForm.type,
              config:{
                signalingIP:this.signalingForm.signalingIP,
                signalingInnerIP:this.signalingForm.signalingInnerIP,
                signalingPort:this.signalingForm.signalingPort,
                signalingInnerPort:this.signalingForm.signalingInnerPort,
                signalingEnableSSL:this.signalingForm.signalingEnableSSL,
                signalingSSLKeyAbsolutePath:this.signalingForm.signalingSSLKeyAbsolutePath,
                signalingSSLCertAbsolutePath:this.signalingForm.signalingSSLCertAbsolutePath,
              }
            };
            saveServer(form).then(rsp => {
              this.$message({
                type: 'success',
                message:rsp.message
              })
              this.closed()
            }).catch(err => {
              console.log(err);
            })
            .finally(() => {
              this.loading = false
            })
          }
        })
      },
      closed: function() {
        this.$emit('closed', false)
      },
    }
  }

</script>

<style>
</style>
